<template lang="pug">
  .header
    h1 LOGO
    div.input-box
        input(
            type='text' 
            placeholder="搜索美食、健康养身"
            )
        i.fa.fa-search
    router-link(to='/login') 登录
</template>
<script>
export default {
  name: 'vheader'
}
</script>
<style lang="scss" scoped>

.header {
    display: flex;
    align-items: center;
    width: $width;
    height: 5.5rem /* 88/16 */;
    background-color: $header-color;

    h1 {
        font-family: 'MicrosoftYaHei-Bold';
        font-size: 2.1875rem /* 35/16 */;
        color: $logo-color;
        margin-left: 1.625rem /* 26/16 */;
        margin-right: 2.6875rem /* 43/16 */;
    }
    .input-box {
            position: relative;
            width: 23.4375rem /* 375/16 */;
            height: 3rem /* 48/16 */;
            @include rounded-corners(1.25rem /* 20/16 */);
            border: 1px solid $border-color;
            input {
                    @extend %input-box;
                    @include rounded-corners(1.25rem /* 20/16 */);
                    font-family: 'HiraginoSansGB-W3';
                    font-size: 1.125rem /* 18/16 */;
                    color: $input-color;
                    text-indent: 1.1875rem /* 19/16 */;
                    outline: none;
                    border: none;
            }
            i {
                position: absolute;
                top: .8125rem /* 13/16 */;
                right: .9375rem /* 15/16 */;
                color: $icon-color;
                font-size: 1.375rem /* 22/16 */;
            }
    }
    a {
        font-family: 'HiraginoSansGB-W3';
        font-size: 1.375rem /* 22/16 */;
        color: $logo-color;
        margin-left: 1.75rem /* 28/16 */;
    }
}
</style>

